<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="images/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="node_modules/Swiper-4.0.7/dist/css/swiper.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="node_modules/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
    </style>
    <title>享V-视频分享网站</title>
</head>

<body>
    <div id="header">
        <div id="nav">
            <!-- logo -->
            <div id="logo">
                <a href="/" target="_self" title="首页">
                    <img src="images/logo.png" alt="logo" />
                </a>
            </div>

            <!-- search -->
            <div id="search-area">
                <a href="javascript:void(0)" class="dropdown">
                    <span>课程</span>
                    <span>作者</span>
                </a>
                <input type="text" name="search-keyword" class="search-input" value="123">
                <a href="javascript:void(0)" class="search-btn">
                    <i class="fa fa-search" aria-hidden="true"></i>
                </a>
            </div>

            <!-- login -->
            <div id="login-area">
                <a href="#" class="signin-btn">登录</a>
                <a href="#" class="signup-btn">注册</a>
            </div>

            <div id="user-area">
                <a href="#" class="user-name">用户123</a>
                <a href="#" class="user-btn cl"><i class="fa fa-cog" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="breadcrumbs cl">
            <div class="container">
                <a href="#" class="breadcrumbs-nav">全部课程</a>
                <span class="breadcrumbs-arrow">></span>
                <a href="#" class="breadcrumbs-nav">兴趣·生活</a>
                <span class="breadcrumbs-arrow">></span>
                <a href="#" class="breadcrumbs-nav">生活百科</a>
                <span class="breadcrumbs-arrow">></span>
                <a href="#" class="breadcrumbs-nav">时尚美妆</a>
                <span class="breadcrumbs-arrow">></span>
                <a href="#" class="breadcrumbs-nav">完颜老师—A上品形象修练术、款型选择、色彩搭配</a>
            </div>
        </div>
        <div class="sort-menu cl">
            <div class="container">
                <div class="sort-menu-left">分类：</div>
                <div class="sort-menu-right">
                    <a href="#" class="sort-menu-item active">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                    <a href="#" class="sort-menu-item">全部课程</a>
                </div>
                <div class="sort-menu-left">类型：</div>
                <div class="sort-menu-right">
                    <a href="#" class="sort-menu-item active">子课程</a>
                    <a href="#" class="sort-menu-item">子课程</a>
                    <a href="#" class="sort-menu-item">子课程</a>
                    <a href="#" class="sort-menu-item">子课程</a>
                    <a href="#" class="sort-menu-item">子课程</a>
                    <a href="#" class="sort-menu-item">子课程</a>
                    <a href="#" class="sort-menu-item">子课程</a>
                </div>
            </div>
        </div>

        <div class="sort-menu cl container">
            <div class="sort-menu-left">综合排序</div>
            <div class="sort-menu-right">
                <a href="#">最热 <i class="fa fa-caret-down" aria-hidden="true"></i></a>
                <a href="#">最新 <i class="fa fa-caret-down" aria-hidden="true"></i></a>
            </div>
        </div>
        <div class="videos bgfff container">
            <div class="videos-wrap cl container">
                <div class="videos-list cl container">
                    <div class="videos-item">
                        <a href="#">
                            <div class="videos-item-top">
                                <img src="images/11baiyang.jpg" alt="">
                            </div>
                            <div class="videos-item-content cl">
                                <h3 class="videos-item-name">对接真实数据从0开发前后端分离企业级上线项目</h3>
                                <span class="videos-item-type">IT互联网</span>
                                <span class="videos-item-publisher">腾讯课堂</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="footer">
        <div class="container cl">
            <div class="footer-link cl">
                <a href="#" title="网站首页">网站首页</a>
                <a href="#" title="人才招募">人才招募</a>
                <a href="#" title="联系我们">联系我们</a>
                <a href="#" title="常见问题">常见问题</a>
                <a href="#" title="常见问题">意见反馈</a>
                <a href="#" title="友情链接">友情链接</a>
                <a href="javasript:void(0)" title="官方微信">
                    官方微信
                    <div class="qrcode">
                        <img src="images/qrcode.png" alt="官方微信" title="官方微信">
                    </div>
                </a>
            </div>
            <p>© 2018 enjoyV.com Power By Alan</p>
        </div>
    </div>
    <script>
    </script>
</body>

</html>